<!--
 * @Author: hye0228 1261769443@qq.com
 * @Date: 2022-10-09 13:18:53
 * @LastEditors: hye0228 1261769443@qq.com
 * @LastEditTime: 2022-10-14 17:06:13
 * @FilePath: \v2.0.0\src\views\admin\authority\RoleList.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <MainContainer class="p-5">
    <MyQuery
      v-model:params="params"
      :options="queryOptions"
      @query="handleQuery"
      @reset="handleReset"
    ></MyQuery>
    <div class="flex">
      <el-button type="primary" @click="openDialog()">+添加角色</el-button>
    </div>
    <MyTable
      v-loading="loading"
      :is-show-selection="false"
      class="my-2"
      :data="list"
      :columns="columns"
    ></MyTable>
    <el-pagination
      v-model:currentPage="params.page"
      v-model:page-size="params.limit"
      :page-sizes="[10, 20, 50, 100]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      class="justify-end"
      @size-change="handleQuery"
      @current-change="handleQuery"
    />
    <MyFormDialog
      v-model:visible="dialogVisible"
      v-model:form-data="formData"
      :title="dialogTitle"
      :options="formOptions"
      :loading="loading"
      @confirm="handleConfirm"
    ></MyFormDialog>
    <MenuTree :id="roleId" v-model:visible="menuTreeVisible"></MenuTree>
  </MainContainer>
</template>
<script setup lang="jsx">
import MainContainer from "@/components/MainContainer.vue";
import MyTable from "@/components/MyTable.vue";
import MenuTree from "./components/MenuTree.vue";
import {
  fetchList,
  createRole,
  deleteRole,
  getOne,
  updateRole,
} from "@/api/role.js";
import parseTime from "@/utils/parseTime.js";
import useCRUD from "@/composables/useCRUD.js";
import MyFormDialog from "@/components/MyFormDialog.vue";
import { ref } from "vue";
import MyQuery from "@/components/MyQuery.vue";
import { ElMessage, ElMessageBox } from "element-plus";

const queryOptions = [
  {
    prop: "keyword",
    placeholder: "搜索角色名称",
  },
];

const columns = [
  {
    label: "编号",
    prop: "id",
  },
  {
    label: "角色名称",
    prop: "name",
  },
  {
    label: "描述",
    prop: "description",
  },
  {
    label: "用户数",
    prop: "adminCount",
  },
  {
    label: "添加时间",
    prop: "createTime",
    formatter(row) {
      const date = new Date(row.createTime);
      return parseTime(date);
    },
  },
  {
    label: "是否启用",
    prop: "status",
    customRender(row) {
      return (
        <el-switch
          v-model={row.status}
          active-value={1}
          inactive-value={0}
          onChange={() => handleUpdate(row.id, row)}
        ></el-switch>
      );
    },
  },
  {
    label: "操作",
    prop: "action",
    minWidth: 100,
    customRender(row) {
      return (
        <div>
          <el-button
            link
            type="danger"
            onClick={async () => {
              await ElMessageBox.confirm("确认继续操作吗", "警告", {
                confirmButtonText: "确认",
                cancelButtonText: "取消",
                type: "warning",
              });
              const { message } = await handleDelete(row.id);
              ElMessage({ type: "success", message });
            }}
          >
            删除
          </el-button>
          <el-button
            class="!text-[#707bdf]"
            link
            onClick={() => openDialog(row.id)}
          >
            编辑
          </el-button>
          <el-button
            class="!text-[#707bdf]"
            link
            onClick={() => openMenuTree(row.id)}
          >
            分配菜单
          </el-button>
        </div>
      );
    },
  },
];

const formOptions = [
  {
    prop: "name",
    label: "角色名称",
    rules: {
      required: true,
      message: "必填",
    },
  },
  {
    prop: "description",
    label: "描述",
    customRender() {
      return <el-input type="textarea" rows={5}></el-input>;
    },
  },
  {
    prop: "entrance",
    label: "关联项目",
    rules: {
      required: true,
      message: "必填",
    },
    customRender() {
      return (
        <el-select placeholder="请选择" class="w-full">
          {relvant.map((item) => {
            return (
              <el-option label={item.label} value={item.entrance}></el-option>
            );
          })}
        </el-select>
      );
    },
  },
  {
    prop: "status",
    label: "是否启用",
    required: true,
    rules: {
      required: true,
      message: "必填",
    },
    customRender() {
      return (
        <el-radio-group>
          <el-radio label={1}>是</el-radio>
          <el-radio label={0}>否</el-radio>
        </el-radio-group>
      );
    },
  },
];

const crudOptions = {
  queryApi: fetchList,
  createApi: createRole,
  deleteApi: deleteRole,
  getOneApi: getOne,
  updateApi: updateRole,
};
const {
  params,
  handleQuery,
  list,
  loading,
  handleReset,
  openDialog,
  dialogVisible,
  handleDelete,
  formData,
  handleConfirm,
  dialogTitle,
  handleUpdate,
  total,
} = useCRUD(crudOptions);

handleQuery();

// 分配菜单相关 ------------------------------------------------------
const roleId = ref(null);
const menuTreeVisible = ref(false);
function openMenuTree(id) {
  menuTreeVisible.value = true;
  roleId.value = id;
}

// 关联项目 ----------------------------------------------
const relvant = [
  {
    label: "围界车",
    entrance: "patroling-control",
  },
  {
    label: "防疫",
    entrance: "home",
  },
  {
    label: "安保",
    entrance: "home",
  },
  {
    label: "足式",
    entrance: "home",
  },
];
</script>
